<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="head::common_header">
</head>
<body>
<div th:replace="header :: header"></div>
<!-- 首页视频banner区 -->
<section class="home" id="home">

    <div class="content">

        <h3>No matter where you’re going to, we’ll take you there</h3>
        <!--        <h3>旅游是一种信仰</h3>-->
        <!--        <p>和我们一起去远方,寻找诗和梦想</p>-->
        <!--        <a href="#" class="btn">查看更多</a>-->
    </div>

    <div class="controls">
        <span class="vid-btn active" data-src="/img/Hippopx.jpg"></span>
        <span class="vid-btn" data-src="/img/Hippopx1.jpg"></span>
        <span class="vid-btn" data-src="/img/Hippopx2.jpg"></span>
        <span class="vid-btn" data-src="/img/Hippopx3.jpg"></span>
    </div>

    <div class="img-container">
        <img src="/img/Hippopx.jpg" id="img-slider" loop autoplay muted></img>
    </div>

</section>
<!-- 预订部分 -->
<section class="book" id="book">

    <h1 class="heading">
        <span>b</span>
        <span>o</span>
        <span>o</span>
        <span>k</span>
        <span class="space"></span>
        <span>n</span>
        <span>o</span>
        <span>w</span>
    </h1>

    <div class="row">

        <div class="image">
            <img src="/img/book-img.svg" alt="">
        </div>

        <form action="">
            <div class="inputBox">
                <h3>where to</h3>
                <input type="text" placeholder="Where to go">
            </div>
            <div class="inputBox">
                <h3>how many</h3>
                <input type="number" placeholder="How many people use the line">
            </div>
            <div class="inputBox">
                <h3>How long will it take you to</h3>
                <input type="date">
            </div>
            <div class="inputBox">
                <h3>How long will you leave?</h3>
                <input type="date">
            </div>
            <input type="submit" class="btn" value="Book now">
        </form>

    </div>

</section>

<!-- 套餐部分 -->


<!-- 服务部分 -->

<!-- 相册部分 -->


<!-- 评价部分 -->
<section class="review" id="review">

    <h1 class="heading">
        <span>r</span>
        <span>e</span>
        <span>v</span>
        <span>i</span>
        <span>e</span>
        <span>w</span>
    </h1>

    <div class="swiper-container review-slider">

        <div class="swiper-wrapper">

            <div class="swiper-slide">
                <div class="box">
                    <img src="/img/pic1.png" alt="">
                    <h3>Nick</h3>
                    <p>xxxxxxxxxx</p>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="box">
                    <img src="/img/pic2.png" alt="">
                    <h3>Bolt</h3>
                    <p>xxxxxxxxxxxx</p>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="box">
                    <img src="/img/pic3.png" alt="">
                    <h3>Susan</h3>
                    <p>xxxxxxxxxxxx</p>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="box">
                    <img src="/img/pic4.png" alt="">
                    <h3>Sbruck</h3>
                    <p>xxxxxxxxxxxxx</p>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                </div>
            </div>

        </div>

    </div>
</section>
<!-- 联系我们 -->


<!-- 品牌赞助 -->
<section class="brand-container">

    <div class="swiper-container brand-slider">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="/img/1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="/img/2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="/img/3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="/img/4.jpg" alt=""></div>
            <div class="swiper-slide"><img src="/img/5.jpg" alt=""></div>
            <div class="swiper-slide"><img src="/img/6.jpg" alt=""></div>
        </div>
    </div>

</section>

<!-- 底部 -->

<div th:replace="footer :: footer"></div>






</body>
</html>
